<template>
  <div class="contact w1190">
  <div class="contactTop text-center">
    <h2 class="commonTitle">联系我们</h2>
    <p>请填写此表,由销售代表联系您</p>
  </div>
  <div class="contactBot">
            <template>
            <div class="formTotal clearfix">
                <div class="formList pull-left formListLeft">
                  <label for="userName">您的姓名</label>
                  <i-input element-id="userName" v-model="userName" @on-change="removeErro('userName')" :class="{ 'ivu-form-item-error' : userNameError }" placeholder="请输入您的姓名"></i-input>
                </div>
                <div class="formList pull-left">
                  <label for="">性别</label>
                  <Select v-model="sex"  @on-change="removeErro('sex')" :class="{ 'ivu-form-item-error' : sexError }">
                    <Option value="先生">先生</Option>
                    <Option value="女士">女士</Option>
                </Select>
                </div>
                <div class="formList pull-left formListLeft">
                    <label for="phone">联系方式</label>
                    <i-input element-id="phone" v-model="phone" @on-change="removeErro('phone')" :class="{ 'ivu-form-item-error' : phoneError }" placeholder="请输入手机号码"></i-input>
                 </div>
                 <div class="formList pull-left">
                    <label for="email">电子邮件</label>
                    <i-input element-id="email" v-model="email" placeholder="请输入电子邮件" @on-change="removeErro('email')" :class="{ 'ivu-form-item-error' : emailError }"></i-input>
                 </div>
                 <div class="formList pull-left formListLeft">
                    <label for="">行业</label>
                    <Select v-model="industry" @on-change="removeErro('industry')" :class="{ 'ivu-form-item-error' : industryError }">
                       <Option v-for="item in industryList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                 </div>
                <div class="formList pull-left">
                    <label for="company">公司名称</label>
                    <i-input element-id="company" v-model="company" @on-change="removeErro('company')" :class="{ 'ivu-form-item-error' : companyError }" placeholder="请输入公司名称"></i-input>
                 </div>
                <div class="formList pull-left formListLast">
                    <label for="help">请描述您需要帮助的内容：(200字符最大)</label>
                    <i-input v-model="help" type="textarea" id="help" @on-change="removeErro('help')" :class="{ 'ivu-form-item-error' : helpError }" placeholder="请输入您需要帮助的内容"></i-input>
                    <p class="limit"><span>剩余{{200 - remnant}}个字符</span></p>
                </div>
                <div class="pull-left button" @click="but">
                    <i-button>提交</i-button>
                </div>
            </div>
        </template>
        <div class="telephone text-center">
        <p class="p1">今天和销售代表谈谈。</p>
        <p class="p2">021-8545-3493</p>
        <p class="p3">187-5558-8885</p>
        </div>
  </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userName: "",
      sex: "",
      phone: "",
      email: "",
      industry: "",
      industryList: [
        {
          value: "金融",
          label: "金融"
        },
        {
          value: "保险",
          label: "保险"
        },
        {
          value: "服务",
          label: "服务"
        },
        {
          value: "餐饮",
          label: "餐饮"
        }
      ],
      company: "",
      help: "",
      remnant: "",
      userNameError: false,
      sexError: false,
      phoneError: false,
      emailError: false,
      industryError: false,
      companyError: false,
      helpError: false
    };
  },

  methods: {
    limit() {
      let ths = this;
      var txtVal = ths.help.length;
      console.log(txtVal);
      ths.remnant = txtVal;
    },
    but() {
      let ths = this;
      //验证姓名：
      var regName = /^[\u4E00-\u9FA5]{2,10}$/;
      if (!ths.userName) {
        ths.$Message.error("姓名不能为空！");
        ths.userNameError = true;
        $("#userName").focus();
        return false;
      } else {
        if (!regName.test(ths.userName)) {
          ths.$Message.error("您输入的姓名不合法，请重新输入");
          ths.userNameError = true;
          $("#userName").focus();
          return false;
        }
      }
      //验证性别：
      if (!ths.sex) {
        ths.$Message.error("性别不能为空！");
        ths.sexError = true;
        return false;
      }
      //验证联系方式：
      var regPhone = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
      if (!ths.phone) {
        ths.$Message.error("联系方式不能为空！");
        ths.phoneError = true;
        $("#phone").focus();
        return false;
      } else {
        if (!regPhone.test(ths.phone)) {
          ths.$Message.error("您输入的联系方式不合法，请重新输入");
          ths.phoneError = true;
          $("#phone").focus();
          return false;
        }
      }
      //验证电子邮件：
      var regEmail = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      if (!ths.email) {
        ths.$Message.error("电子邮箱不能为空！");
        ths.emailError = true;
        $("#email").focus();
        return false;
      } else {
        if (!regEmail.test(ths.email)) {
          ths.$Message.error("您输入的电子邮箱不合法，请重新输入");
          ths.emailError = true;
          $("#email").focus();
          return false;
        }
      }
      //验证行业：
      if (!ths.industry) {
        ths.$Message.error("行业不能为空！");
        ths.industryError = true;
        $("#industry").focus();
        return false;
      }
      //验证公司名称：
      var regCompany = /^[\u4E00-\u9FA5A-Za-z0-9]{2,}$/;
      if (!ths.company) {
        ths.$Message.error("公司名称不能为空！");
        ths.companyError = true;
        $("#company").focus();
        return false;
      } else {
        if (!regCompany.test(ths.company)) {
          ths.$Message.error("您输入的公司名称不合法，请重新输入");
          ths.companyError = true;
          $("#company").focus();
          return false;
        }
      }
      //验证需要帮助的内容：
      if (!ths.help) {
        ths.$Message.error("行业不能为空！");
        ths.helpError = true;
        $("#help").focus();
        return false;
      }
      ths.$router.push({ name: "ContactSuccess" });
    },
    removeErro: function(name) {
      let ths = this;
      if (name == "userName") {
        ths.userNameError = false;
      }
      if (name == "sex") {
        ths.sexError = false;
      }
      if (name == "phone") {
        ths.phoneError = false;
      }
      if (name == "email") {
        ths.emailError = false;
      }
      if (name == "industry") {
        ths.industryError = false;
      }
      if (name == "company") {
        ths.companyError = false;
      }
      if (name == "help") {
        ths.helpError = false;
        ths.limit();
      }
    }
  }
};
</script>

<style lang="less">
.contact {
  padding-bottom: 50px;
  .contactTop {
    padding: 60px 0 30px 0;
    background: #f6f6f6;
    p {
      font-size: 1.8rem;
      line-height: 20px;
      color: #6a6a6a;
      margin-top: 40px;
    }
  }
  .contactBot {
    .ivu-select-item-selected,
    .ivu-select-item-selected:hover {
      color: #495060;
      background: #fff;
    }
    // .ivu-select-visible .ivu-select-selection {
    //   box-shadow: none;
    // }
    // .ivu-input {
    //   border: 1px solid #EEEEEE;
    // }
    // .ivu-select-selection:hover,
    // .ivu-input:hover {
    //   border-color: #EEEEEE;
    // }
    .formTotal {
      width: 690px;
      margin: 0 auto;
      .formList {
        width: 320px;
        margin-top: 42px;
        label {
          font-size: 1.6rem;
          line-height: 16px;
        }
        input {
          height: 48px;
          margin-top: 5px;
        }
        select {
          height: 48px;
        }
        span {
          display: block;
          height: 48px;
          line-height: 48px;
        }
        #help{
            margin-top: 5px;
        }
        .ivu-select-selection {
          height: 48px;
          line-height: 48px;
          margin-top: 5px;
        }
        .limit {
          font-size: 1.4rem;
          line-height: 14px;
        }
      }
      .formListLeft {
        margin-right: 50px;
      }
      .formListLast {
        width: 100%;
        textarea {
          resize: none;
          height: 236px;
        }
      }
      .button {
        margin-top: 12px;
        .ivu-btn {
          width: 180px;
          height: 60px;
          border-radius: 5px;
          border: none;
          border: 1px solid #999999;
          background: #fff;
          &:hover {
            border: 1px solid #999999;
          }
          span {
            font-size: 2rem;
            color: #9f9f9f;
          }
        }
      }
    }
    .telephone {
      margin-top: 58px;
      .p1 {
        font-size: 1.6rem;
        line-height: 16px;
        color: #999999;
      }
      .p2,
      .p3 {
        font-size: 3.2rem;
        line-height: 26px;
        color: #3a3a3a;
      }
      .p2 {
        margin: 20px auto 30px auto;
      }
    }
  }
}
</style>

